vue使用jquery.wordexport导出word文档（批量导出为zip） |
您所在的位置：网站首页 › jquery 设置颜色 › vue使用jquery.wordexport导出word文档（批量导出为zip） |
|
前言
网上查了很多jquery.wordexport的文章都是只支持单独导出word，不符合业务需求。因此修改了jquery.wordexport、利用jszip、file-saver批量导出word。 前提准备包的版本分别为[email protected]、[email protected]。jquery版本随意，本文使用的为@3.2.1 npm i [email protected] -D npm i [email protected] -D 正文 html部分注意：导出word文档识别不了css中的样式，只能将样式写为行内样式或者添加在wordExport（）方法的第二个参数中。jquery.wordexport无法使用flex布局，position等 {{ item.formTitle }} 操作时间 操作人员 操作节点 操作类型 操作结果 反馈详情 {{ record.create_time | dateFormat}} {{ record.operator.nickname}} {{ record.level_from | formatAuditNode}} {{ record.type | formatState}} {{ record | formatResult}} {{ record.remark}} script部分jquery的引用应放在wordexport前 注意：批量压缩时 同名文件将只会存在一个，请注意命名 import JSZip from 'jszip'; import FileSaver from 'file-saver'; import $ from '../../../libs/jquery-3.2.1/jquery.min.js'; import '../../../libs/jquery.wordexport'; export default { data() { return { exportWordList: [],//需导出word表格列表 } } methods: { async handleWordExport() { this.exportWordList = [];//初始化 //...数据处理 // 导出 //本文数据处理有异步操作，nextTick处理保证页面已更新 this.$nextTick(() => { let wordFiles = []; let wordList = []; // 由于批量压缩时 同名文件将只会存在一个 这里我们采用[[],[]]包裹同名文件 this.exportWordList.forEach(async (wordItem, index) => { let tmpIndex = wordList.findIndex((tmpWordItem) => { return tmpWordItem[0].formTitle == wordItem.formTitle; }); if (tmpIndex == -1) { wordList.push([wordItem]); } else { wordList[tmpIndex].push(wordItem); // wordList[tmpIndex][wordList[tmpIndex].length - 1].formTitle += '' + (wordList[tmpIndex].length - 1); wordItem.formTitle += '(' + (wordList[tmpIndex].length - 1) + ')'; } let rules = 'table{' + ' border-collapse:collapse;' + ' margin:0 auto;' + ' text-align:center;' + ' width: 100%;' + '}' + 'table td,table th{' + ' text-align:center;' + ' border:1px solid #000000;' + ' height:25pt;' + ' width:15%;' + '}' + 'table thead th{' + ' width:15%' + '}' + 'table tr{' + ' background:#fff;' + '}'; //可以通过修改wordExport（）方法的第二个参数，添加样式 let wordFile = await $('#word' + index).wordExport(wordItem.formTitle, rules); wordFiles.push(wordFile); if (wordFiles.length == this.exportWordList.length) { this.zipWordExport(wordFiles); } }); } }, //导出zip zipWordExport(promises) { const zip = new JSZip(); const _this = this; promises.forEach(async (item, index) => { //word为blob数据 const { word, fileName } = item; if (promises.length === 1) { FileSaver.saveAs(word, `${fileName}.doc`); } else { await zip.file(`${fileName}.doc`, word); } if (promises.length > 1 && promises.length - 1 == index) { _this.$message.warning('正在压缩请稍后'); zip.generateAsync({ type: 'blob' }).then((content) => { FileSaver.saveAs(content, '表单记录合集' + '.zip'); }); } }); }, } } jquery.wordexport代码注意：jquery.wordexport中导入的jquery文件应与正文代码为同一文件 // 导入js文件 import $ from './jquery-3.2.1/jquery.min.js'; let jQuery = $; if (typeof jQuery !== 'undefined') { (function () { $.fn.wordExport = function (fileName, rules) { return new Promise((resolve, reject) => { setTimeout(() => { fileName = typeof fileName !== 'undefined' ? fileName : 'jQuery-Word-Export'; var static_ = { mhtml: { top: 'Mime-Version: 1.0\nContent-Base: ' + location.href + '\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' + location.href + '\n\n\n\n_html_', head: '\n\n\n_styles_\n\n\n', body: '_body_' } }; var options = { maxWidth: 624 }; // Clone selected element before manipulating it var markup = $(this).clone(); // Remove hidden elements from the output markup.each(function () { var self = $(this); if (self.is(':hidden')) { self.remove(); } }); // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i type: uri.substring(uri.indexOf(':') + 1, uri.indexOf(';')), encoding: uri.substring(uri.indexOf(';') + 1, uri.indexOf(',')), location: $(img[i]).attr('src'), data: uri.substring(uri.indexOf(',') + 1) }; } // Prepare bottom of mhtml file with image data var mhtmlBottom = '\n'; for (var i = 0; i type: 'application/msword;charset=utf-8' }); resolve({ word: blob, fileName: fileName }); }, 10); }); }; })(jQuery); } else { if (typeof jQuery === 'undefined') { console.error('jQuery Word Export: missing dependency (jQuery)'); } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |